Progressive Web Apps

Eine Progressive Web App (PWA) ist eine App, die mit Webplattform-Technologien erstellt wurde, aber eine Benutzererfahrung wie eine plattformspezifische App bietet.

Wie eine Webseite kann eine PWA mit einer einzigen Codebasis auf mehreren Plattformen und Geräten laufen. Wie eine plattformspezifische App kann sie auf dem Gerät installiert werden, offline und im Hintergrund arbeiten und sich mit dem Gerät und anderen installierten Apps integrieren.

Leitfäden

Die PWA-Leitfäden bieten konzeptionelle Erklärungen zu verschiedenen Aspekten von PWAs. Sie sollen Ihnen helfen, zu verstehen, welche Möglichkeiten PWAs bieten, und genügend Hinweise geben, damit Sie wissen, wie Sie diese umsetzen können.

Was ist eine Progressive Web App?

Eine Einführung in PWAs, die sie mit traditionellen Webseiten und plattformspezifischen Apps vergleicht und ihre Hauptmerkmale aufzeigt.

PWAs installierbar machen

Ein definierendes Merkmal einer PWA ist, dass sie auf dem Gerät installiert werden kann und dann den Nutzern wie eine plattformspezifische App erscheint, ein permanentes Feature ihres Geräts, das sie direkt vom Betriebssystem aus wie jede andere App starten können. In diesem Leitfaden untersuchen wir, was "installierbar" bedeutet, was eine PWA bieten muss, um installierbar zu sein, und wie Sie das Installationserlebnis anpassen können.

Web Apps installieren und deinstallieren

Dieser Leitfaden beschreibt, wie Benutzer PWAs auf ihren Geräten installieren und deinstallieren können.

Offline- und Hintergrundbetrieb

In diesem Leitfaden stellen wir eine Reihe von Technologien vor, die es einer PWA ermöglichen, eine gute Benutzererfahrung zu bieten, selbst wenn das Gerät eine intermittierende Netzwerkverbindung hat, und um Operationen im Hintergrund auszuführen, selbst wenn die Haupt-App nicht läuft.

Caching

Ein Überblick über die APIs, die es einer PWA ermöglichen, Ressourcen lokal zu cachen, und einige übliche Strategien, die von PWAs verwendet werden, um Offline-Funktionalität zu implementieren.

Best Practices für PWAs

PWAs sollten sich an unterschiedliche Browser und Geräte anpassen, zugänglich sein, gute Leistung bieten und sich gut in das Betriebssystem integrieren. Dieser Leitfaden bietet eine Liste von Best Practices, um sicherzustellen, dass Ihre PWA so gut wie möglich ist.

Anleitung

Die PWA-Anleitungen bieten detaillierte Anweisungen zur Implementierung spezifischer PWA-Funktionen.

Erstellen Sie eine eigenständige App

Beschreibt, wie man angibt, dass eine PWA in ihrem eigenen speziellen Fenster gestartet werden soll, wenn sie gestartet wird, anstatt in einem Browser-Tab.

App-Icons definieren

Beschreibt, wie Sie Ihren eigenen Satz von Icons definieren, die verwendet werden, wenn die PWA auf einem Gerät installiert ist.

Farben Ihrer App anpassen

Beschreibt, wie man Hintergrund- und Themendesignfarben für eine PWA festlegt.

Badges anzeigen

Beschreibt, wie man ein Badge auf dem Icon der PWA anzeigt, um beispielsweise den Benutzer darüber zu informieren, dass er neue Nachrichten erhalten hat.

Gemeinsame App-Aktionen als Shortcuts bereitstellen

Beschreibt, wie man gemeinsame Aktionen einer PWA bereitstellt, die über das App-Shortcut-Menü des Betriebssystems gestartet werden können.

Daten zwischen Apps teilen

Beschreibt, wie PWAs Daten miteinander teilen können, indem sie den App-Sharing-Mechanismus des Betriebssystems nutzen.

Installation von Ihrer PWA auslösen

Beschreibt, wie Entwickler ihre eigene Benutzeroberfläche bereitstellen können, um Benutzer zur Installation ihrer PWA einzuladen.

Dateien mit Ihrer PWA verknüpfen

Beschreibt, wie Sie eine Verknüpfung zwischen Dateitypen und Ihrer PWA erstellen können, sodass beim Klicken auf die Datei Ihre PWA gestartet wird, um sie zu verarbeiten.

Tutorials

Bauen Sie eine PWA von Grund auf mit diesen PWA-Tutorials, die die Schritte von Anfang bis Ende durchgehen und dabei erklären, wie die verschiedenen Funktionen der App umgesetzt werden.

Erstellen Ihrer ersten PWA

Dieses Tutorial für Anfänger begleitet Sie durch die Erstellung einer PWA zur Verfolgung von Menstruationszyklen. Die Lektionen enthalten eine Schrit-für-Schritt-Anleitung durch das erforderliche HTML, CSS und JavaScript, um eine voll funktionsfähige Web-App zu erstellen, das Einrichten einer Testumgebung und vollständige Erklärungen, die den Lernenden beim Upgrade der Web-App zu einer PWA führen; einschließlich der Entwicklung und Inspektion eines Manifests, dem Hinzufügen eines Service Workers und der Verwendung des Service Workers zum Löschen veralteter Caches.

Vertiefung in PWA

Dieses Tutorial auf mittlerem Niveau begleitet Sie durch die Erstellung einer PWA, die Informationen über Spiele auflistet, die für die A-Frame-Kategorie im js13kGames 2017-Wettbewerb eingereicht wurden. Dieses Tutorial enthält alle Grundlagen zur Erstellung einer PWA mit zusätzlichen Funktionen, einschließlich Benachrichtigungen, Push und App-Leistung.

Referenz

Unsere PWA-Referenz listet alle auf MDN dokumentierten Funktionen auf, die Sie zum Erstellen einer PWA benötigen.

Web-App-Manifest

Web-App-Manifest-Mitglieder

Entwickler können Web-App-Manifest-Mitglieder verwenden, um eine PWA zu beschreiben, ihr Erscheinungsbild anzupassen und sie tiefer in das Betriebssystem zu integrieren.

Service Worker APIs

Kommunikation mit der App

Die folgenden APIs können von einem Service Worker verwendet werden, um mit der zugehörigen Client-PWA zu kommunizieren:

Client.postMessage()

Ermöglicht es einem Service Worker, eine Nachricht an seine Client-PWA zu senden.

Broadcast Channel API

Ermöglicht es einem Service Worker und seiner Client-PWA, einen einfachen Zwei-Wege-Kommunikationskanal einzurichten.

Offline-Betrieb

Die folgenden APIs können von einem Service Worker verwendet werden, um Ihre App offline arbeitsfähig zu machen:

Cache

Ein dauerhaftes Speichermedium für HTTP-Antworten, das zum Speichern von Assets verwendet wird, die wiederverwendet werden können, wenn die App offline ist.

Clients

Eine Schnittstelle, die verwendet wird, um Zugriff auf die Dokumente zu gewähren, die vom Service Worker kontrolliert werden.

FetchEvent

Ein Ereignis, das im Service Worker mit jeder HTTP-Anfrage ausgelöst wird, die von der Client-PWA gemacht wird. Das Ereignis kann verwendet werden, um entweder die Anfrage normal an den Server zu senden und die Antwort für die zukünftige Verwendung zu speichern oder die Anfrage abzufangen und sofort mit einer zuvor gecachten Antwort zu antworten.

Hintergrundbetrieb

Die folgenden APIs können von einem Service Worker verwendet werden, um Aufgaben im Hintergrund auszuführen, selbst wenn Ihre App nicht läuft:

Background Synchronization API

Eine Möglichkeit, Aufgaben zu verschieben, um in einem Service Worker ausgeführt zu werden, sobald eine stabile Netzwerkverbindung besteht.

Web Periodic Background Synchronization API

Eine Möglichkeit, Aufgaben in einem Service Worker zu registrieren, die in periodischen Intervallen mit Netzwerkverbindung ausgeführt werden sollen.

Background Fetch API

Eine Methode für einen Service Worker, um Downloads zu verwalten, die eine beträchtliche Zeit in Anspruch nehmen können, wie z.B. Video- oder Audiodateien.

Andere Web-APIs

IndexedDB

Eine clientseitige Speicher-API für bedeutende Mengen strukturierter Daten, einschließlich Dateien.

Badging API

Eine Methode zum Setzen eines Badges auf dem App-Icon, um eine Benachrichtigung mit geringer Ablenkung zu bieten.

Notifications API

Eine Möglichkeit, Benachrichtigungen zu senden, die auf Betriebssystemebene angezeigt werden.

Web Share API

Ein Mechanismus zum Teilen von Text, Links, Dateien und anderen Inhalten mit anderen Apps, die vom Benutzer auf seinem Gerät ausgewählt wurden.

Window Controls Overlay API

Eine API für auf Desktop-Betriebssystemen installierte PWAs, die das Verbergen der standardmäßigen Fenstertitelleiste ermöglicht und die Anzeige der App über die gesamte Oberfläche des App-Fensters erlaubt.

Siehe auch